<template>
  <div>
    <h1>首页o(≧v≦)o</h1>
    欢迎 {{name}} 登录<hr>
    <div class="demo-type">
      <el-avatar :size="60" src="https://empty">
        <img :src="this.avatar"/>
      </el-avatar>
    </div><br><br>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="formInline.name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="list">查询</el-button>
          <el-button type="primary" @click="addGoods">添加</el-button>
          <el-button type="primary" @click="addType">添加分类</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-row>
        <el-col :span="5" v-for="(o, index) in goodsData" :key="o.id" :offset="index > 0 ? goodsData : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="o.img" class="image">
            <div style="padding: 14px;">
              <span><h3>{{o.name}}</h3></span>
              <span><h4>¥ {{o.price}}</h4></span>
              <span>{{o.describes}}</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button @click="addCart(o.id)" type="text" class="button">加入购物车</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div><br><hr>
<!--分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
<!--    添加-->
    <div>
      <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品库存" :label-width="formLabelWidth">
            <el-input v-model="form.num" autocomplete="off" placeholder="请输入商品库存"></el-input>
          </el-form-item>
          <el-form-item label="商品单价" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off" placeholder="请输入商品单价"></el-input>
          </el-form-item>
          <el-form-item label="商品类型" :label-width="formLabelWidth">
            <div class="block">
              <el-cascader
                  v-model="form.typeId"
                  :options="options"
                  :props="{ expandTrigger: 'hover',value:'id',label:'name' }"
                  @change="handleChange"></el-cascader>
            </div>
          </el-form-item>
          <el-form-item label="商品图片" :label-width="formLabelWidth">
            <el-upload
                class="avatar-uploader"
                :action="action"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="form.img" :src="form.img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input v-model="form.describes" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListView",
  data(){
    return{
      formInline:{
        name:''
      },
      name:localStorage.getItem("name"),
      avatar:localStorage.getItem("avatar"),
      goodsData:[],
      pageSizes:[1, 2, 3, 4],
      pageNum:1,
      pageSize:2,
      total:0,
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{
        img:''
      },
      value: [],
      options: [],
      action:"http://localhost:8003/api/tb-goods/upload"
    }
  },methods:{
    list(){
      this.axios.post("http://localhost:8003/api/tb-goods/list?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&name="+this.formInline.name).then(res=>{
        console.log(res)
        this.goodsData=res.data.records
        this.pageSize=res.data.size;
        this.pageNum=res.data.current;
        this.total=res.data.total
      })
    }, handleSizeChange(val) {
      this.pageSize=val;
      this.list();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum=val;
      this.list();
      console.log(`当前页: ${val}`);
    },addCart(id){
      //alert(id)
      this.axios.post("http://localhost:8003/api/tb-goods/addCart?id="+id).then(res=>{
        if(res.data=='success'){
          console.log(res.data);
          this.$message.success("加入成功");
        }
      })
    },
    /*添加方法*/
    addGoods(){
        this.dialogFormVisible=true;
        this.axios.post("http://localhost:8003/api/tb-goods/typeList").then(res=>{
          this.options=res.data
        })
    },handleChange(value) {
      console.log(value);
    },
    add(){
      this.axios.post("http://localhost:8003/api/tb-goods/add",this.form).then(res=>{
        console.log("添加商品====="+res.data);
        if(res.data=='success'){
          this.$message.success("添加成功");
          this.dialogFormVisible=false;
          this.list();
        }
      })
    },
    /*====头像===*/
    handleAvatarSuccess(res) {
      console.log(res)
      this.form.img=res
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },addType(){
      this.$router.push("/types")
    }
  },created() {
    this.list();
  }
}
</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>